window.onload=function(){
    swipeLeft();
}
function swipeLeft() {
    var leftBox = document.querySelector('.content-left');
    var ul = leftBox.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    var top = 0;
    var maxTop = 0;
    var minTop = leftBox.offsetHeight-ul.offsetHeight;
    var swipeMax = maxTop + 100;
    var swipeMin = minTop - 100;
    var setTranslateY = function (y) {
        ul.style.transform = 'translateY(' + y + 'px)';
        ul.style.webkitTransform = 'translateY(' + y + 'px)';
    }
    var addTransition = function () {
        ul.style.transition = "all 0.3s";
        ul.style.webkitTransition = 'all 0.3s';
    }
    var removeTransition = function () {
        ul.style.transition = 'none';
        ul.style.webkitTransition = 'none';
    }
    itcast.tap(leftBox, function (e) {
        var target = e.target.parentNode;
        for (var i = 0; i < lis.length; i++) {
            lis[i].classList.remove('current');
            lis[i].index = i;
        }
        target.classList.add('current');
        console.log(target);
        var y = target.index * (-50);
        if (y > maxTop) {
            y = maxTop;
        }
        if (y < minTop) {
            y = minTop;
        }
        top = y;
        addTransition();
        setTranslateY(y);
    })


    var startY = 0;
    var moverY = 0;
    var distanceY = 0;
    leftBox.addEventListener('touchstart', function (e) {
        startY = e.targetTouches[0].clientY;
    })
    leftBox.addEventListener('touchmove',function (e) {
        moverY = e.targetTouches[0].clientY;
        distanceY = moverY - startY;
        removeTransition();
        var y = top + distanceY;
        if (y > swipeMax) {
            y = swipeMax;
        }
        if (y < swipeMin) {
            y = swipeMin;
        }
        setTranslateY(y);
    })
    leftBox.addEventListener('touchend', function (e) {
        top = top + distanceY;
        if (top > maxTop) {
            top = maxTop;
        }
        if (top < minTop) {
            top = minTop;
        }
        addTransition();
        setTranslateY(top);
        startY = 0;
        moverY = 0;
        distanceY = 0;
    })
}